<template>
  <view class="content">
    <view class="footer">
      <view 
        class="listcontent" 
        v-for="shop in shops" 
        :key="shop.id" 
        @click="shopclick(shop._id)"
        :style="{ transition: 'transform 0.3s ease', cursor: 'pointer' }"
        @mouseenter="scaleUp"
        @mouseleave="scaleDown"
      >
        <view class="listitem">
          <img :src="shop.imgUrl" width="80px" height="80px" />
        </view>
        <view class="listitem listcon">
          <view class="shop-name">{{shop.name}}</view>
          <view class="listrow">
            <view>{{shop._id}}</view>
            <view>月售：{{shop.sales}}</view>
            <view>起送：{{shop.expressLimit}}</view>
            <view>基础运费：{{shop.expressPrice}}</view>
          </view>
          <view class="slogan">{{shop.slogan}}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      shops: [],
    };
  },
  onLoad() {
    this.shopsdata(); // 获取店铺数据
  },
  methods: {
    shopsdata() {
      uni.request({
        url: 'http://localhost:3000/hotList',
        success: (res) => {
          this.shops = res.data;
        },
      });
    },
    // 点击超市跳转
    shopclick(id1) {
      console.log(id1);
      uni.navigateTo({
        url: `/pages/index/wem?id=${id1}`,
      });
    },
    scaleUp(e) {
      e.currentTarget.style.transform = 'scale(1.05)';
    },
    scaleDown(e) {
      e.currentTarget.style.transform = 'scale(1)';
    },
  },
};
</script>

<style scoped>
.content {
  display: flex;
  flex-direction: column;
  /* align-items: center; */
  /* justify-content: center; */
  padding: 20px;
}

.footer {
  width: 100%;
  margin-top: 20px;
}

.listcontent {
  margin-top: 20px;
  width: 100%;
  display: flex;
  flex-direction: row;
  border-top: 1px solid #e0e0e0;
  padding-top: 20px;
  padding-bottom: 20px;
  border-radius: 10px;
  transition: box-shadow 0.3s ease;
}

.listcontent:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.listitem {
  display: flex;
  /* align-items: center; */
}

.listcon {
  margin-left: 20px;
  font-size: 16px;
  display: flex;
  flex-direction: column;
  /* justify-content: center; */
}

.shop-name {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 5px;
}

.listrow {
  display: flex;
  flex-direction: row;
  padding-top: 5px;
  padding-bottom: 5px;
  color: #777;
}

.listrow view {
  margin-right: 20px;
}

.slogan {
  color: red;
  margin-top: 5px;
}
</style>    